<!-- emmet -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./res/font-awesome-4.7.0/css/font-awesome.css">
</head>

<body>
    <div id="app" class="column">
        <div class="header row">
            <div class="icon-home center">
                <i class="fa fa-home fa-2x"></i>
            </div>
            <div class="music-name center"></div>
            <div class="icon-share center">
                <i class="fa fa-share-alt fa-2x"></i>
            </div>
        </div>
        <div class="body center">
            <!-- 毛玻璃背景 -->
            <img class="blur-img" src="./img/600.jpg" alt="">
            <!-- 旋转唱片 -->
            <div class="disc center">
                <img class="ablum-img" src="./img/600.jpg" alt="">
                <img class="disc-img" src="./img/disc.png" alt="">
            </div>
        </div>
        <div class="footer column">
            <div class="box-progress center">
                <div class="progress-bg">
                    <div class="progress"></div>
                </div>
            </div>
            <div class="box-time row">
                <div class="time-now">01:24</div>
                <div class="time-total">05:30</div>
            </div>
            <div class="box-btns row">
               <button class="btn-loop">
                    <i class="fa fa-list-ol"></i>
               </button>
               <button class="btn-prev">
                    <i class="fa fa-step-backward fa-2x"></i>
               </button>
               <button class="btn-play-pause" onclick="startPlay">
                    <i class="fa fa-play fa-3x"></i>
               </button>
               <button class="btn-next">
                    <i class="fa fa-step-forward fa-2x"></i>
               </button>
               <button class="btn-list">
                    <i class="fa fa-list"></i>
               </button>     
            </div>
        </div>
    </div>
    <!-- 歌曲列表的弹层组件 -->
    <div id="music-list-dialog">
        <!-- 关闭按钮 -->
        <button id="btn-close">
            <i class="fa fa-times-circle fa-2x"></i>
        </button>
        <!-- 歌曲列表容器 -->
        <div class="list">
            <ul id="music-list"></ul>
        </div>
    </div>

    <!--提示框组件-->
    <div id="tips" class="center">
        <span>列表循环</span>
    </div>

    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>